<template>
  <view class="page flex-col">
    <view class="group_1 flex-row">
      <view class="box_1 flex-col">
        <view class="box_4 flex-row justify-between" style="display: flex;">
          <text class="text_3">我的邀请码&nbsp;{{userId}}</text>
          <view class="section_1 flex-row">
            <view class="image-text_1 flex-row justify-between">
              <uni-data-select
              	class="selected"
              	v-model="value"
              	:localdata="range"
              	@change="change"
              >
			  </uni-data-select>
            </view>
          </view>
        </view>
        <view class="list_1 flex-col">
          <view
            class="list-items_1 flex-col"
            v-for="(item, index) in inviteList"
            :key="index"
          >
            <view class="group_2 flex-row justify-between">
              <view class="text-group_2 flex-col">
                <text class="text_4" >邀请人</text>
                <text class="text_5">{{item.nickName}}</text>
              </view>
              <view class="text-group_3 flex-col">
                <text class="text_6" >邀请人电话号码</text>
                <text class="text_7">{{item.phonenumber}}</text>
              </view>
            </view>
            <view class="group_3 flex-row justify-between">
              <view class="text-group_4 flex-col">
                <text class="text_8">被邀请人</text>
                <text class="text_9">{{item.znickName}}</text>
              </view>
              <view class="text-group_5 flex-col">
                <text class="text_10">被邀请人电话号码</text>
                <text class="text_11" >{{item.zphonenumber?item.zphonenumber:'空号'}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { myInvite,userID } from '../../../api/system/user.js';

export default {
	data() {
		return {
			value: 1,
			range: [
				{ value: 1, text: '直属粉丝' },
				{ value: 2, text: '团队粉丝' }
			],
			inviteList: [],
			fid: '',
			grade: '',
			userId:''
		}
	},
	onLoad(){
		this.change();
		this.myUser()
	},
	async mounted(){
		await this.myUser()
	},
	methods: {
		async myUser() {
		  const userId = await userID(); // 使用异步请求获取 userId
		  console.log('获取信息成功', userId);
		  this.userId = userId; // 将获取的 userId 赋值给 this.userId
		  this.fid = this.userId; // 将 this.userId 赋值给 this.fid
		  this.change(); // 先调用 change 方法来更新 inviteList
		  this.myInviteRequest(this.fid); // 将 this.fid 作为参数传递给 myInviteRequest
		},
		change(value) {
			const { value: grade } = this.range.find(item => item.value === this.value);
			this.grade = grade;
			// 发起请求
			this.myInviteRequest(this.fid);
		},
		myInviteRequest(fid) {
		  myInvite(fid, this.grade).then(res => {
		    console.log('请求成功', res);
		    this.inviteList = res; // 根据接口返回的数据结构设置 inviteList 的值
		    console.log('xxx', this.inviteList);
		  });
		  // myUser()
		},
	}
}
</script>
<style>
	::v-deep .uni-select__input-text{
		color: aliceblue !important;
	}
</style>
<style lang="scss">
.selected{
	width: 100px; /* 自定义组件的宽度 */
	  height: 35px; /* 自定义组件的高度 */
	  background-color: rgba(41, 167, 244, 1); /* 自定义组件的背景颜色 */
	  border-radius: 10px;
	  position: relative;
	  left: -30px;
}
.page {
  background-color: rgba(246, 247, 251, 1);
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .group_1 {
	  flex: 1;
    .box_1 {
      margin-bottom: 33px;
      padding: 14px 14px 0 16px;
      .box_2 {
        width: 345px;
        .text_1 {
          overflow-wrap: break-word;
          color: rgba(0, 0, 0, 1);
          font-size: 15px;
          letter-spacing: -0.3333333432674408px;
          font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
          font-weight: NaN;
          text-align: center;
          white-space: nowrap;
          line-height: 18px;
        }
        .image_1 {
          width: 67px;
          height: 11px;
          margin: 3px 0 4px 0;
        }
      }
      .box_3 {
        width: 204px;
        margin: 23px 141px 0 0;
        .thumbnail_1 {
          width: 17px;
          height: 17px;
          margin: 3px 0 2px 0;
        }
        .text_2 {
          overflow-wrap: break-word;
          color: rgba(34, 34, 34, 1);
          font-size: 16px;
          font-weight: NaN;
          text-align: center;
          white-space: nowrap;
          line-height: 22px;
        }
      }
      .box_4 {
        width: 335px;
        margin: 21px 6px 0 4px;
        .text_3 {
          overflow-wrap: break-word;
          color: rgba(34, 34, 34, 1);
          font-size: 16px;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 22px;
          margin-top: 6px;
        }
        .section_1 {
          border-radius: 8px;
          // padding: 6px 20px 6px 20px;
          .image-text_1 {
            width: 70px;
            .text-group_1 {
              overflow-wrap: break-word;
              color: rgba(255, 255, 255, 1);
              font-size: 16px;
              font-weight: NaN;
              text-align: center;
              white-space: nowrap;
              line-height: 22px;
            }
            .thumbnail_2 {
              width: 14px;
              height: 8px;
              margin: 7px 0 7px 0;
            }
          }
        }
      }
      .list_1 {
        height: 432px;
        margin: 19px 6px 0 4px;
        .list-items_1 {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 8px;
          margin-bottom: 15px;
			display: grid;
		    grid-template-columns: repeat(2, 1fr);
		    gap: 10px;
          padding: 15px 69px 15px 15px;
		  .group_2, .group_3 {
		    display: flex;
		    flex-direction: column;
		  }
		  
		 .text-group_2, .text-group_3, .text-group_4, .text-group_5 {
		   display: flex;
		   align-items: flex-start; /* 文字向左对齐 */
		   margin-bottom: 10px;
		 }
          .group_2 {
			
            // width: 251px;
            .text-group_2 {
				display: flex;
				flex-direction: column;
              .text_4 {
                overflow-wrap: break-word;
                color: rgba(153, 153, 153, 1);
                font-size: 13px;
                font-weight: NaN;
                text-align: left;
                white-space: nowrap;
                line-height: 18px;
              }
              .text_5 {
                overflow-wrap: break-word;
                color: rgba(34, 34, 34, 1);
                font-size: 16px;
                font-weight: NaN;
                text-align: left;
                white-space: nowrap;
                line-height: 22px;
                margin: 2px 7px 0 0;
              }
            }
            .text-group_3 {
				display: flex;
				flex-direction: column;
              .text_6 {
                overflow-wrap: break-word;
                color: rgba(153, 153, 153, 1);
                font-size: 13px;
                font-weight: NaN;
                text-align: left;
                white-space: nowrap;
                line-height: 18px;
                margin-right: 34px;
              }
              .text_7 {
                overflow-wrap: break-word;
                color: rgba(34, 34, 34, 1);
                font-size: 16px;
                font-weight: NaN;
                text-align: left;
                white-space: nowrap;
                line-height: 22px;
                margin-top: 2px;
              }
            }
          }
          .group_3 {
            // width: 251px;
            // margin-top: 20px;
            .text-group_4 {
				display: flex;
				flex-direction: column;
              .text_8 {
                overflow-wrap: break-word;
                color: rgba(153, 153, 153, 1);
                font-size: 13px;
                font-weight: NaN;
                text-align: left;
                white-space: nowrap;
                line-height: 18px;
              }
              .text_9 {
                overflow-wrap: break-word;
                color: rgba(34, 34, 34, 1);
                font-size: 16px;
                font-weight: NaN;
                text-align: left;
                white-space: nowrap;
                line-height: 22px;
                margin: 2px 20px 0 0;
              }
            }
            .text-group_5 {
				display: flex;
				flex-direction: column;
              .text_10 {
                overflow-wrap: break-word;
                color: rgba(153, 153, 153, 1);
                font-size: 13px;
                font-weight: NaN;
                text-align: left;
                white-space: nowrap;
                line-height: 18px;
                margin-right: 21px;
              }
              .text_11 {
                overflow-wrap: break-word;
                color: rgba(34, 34, 34, 1);
                font-size: 16px;
                font-weight: NaN;
                text-align: left;
                white-space: nowrap;
                line-height: 22px;
                margin-top: 2px;
              }
            }
          }
        }
      }
    }
    .image_2 {
      width: 375px;
      height: 34px;
      margin: 778px 0 0 -375px;
    }
  }
}
</style>
